export interface WaterfallItem {
  id: string | number;
  url: string;
  width: number;
  height: number;
  displayHeight?: number;
  title?: string;
  [key: string]: any;
}

export default function useWaterfall(
  items: () => WaterfallItem[], // 改为函数形式，确保响应性
  columns = 2,
  gutter = 10,
) {
  // 状态
  const containerWidth = ref(0);
  const columnHeights = ref<number[]>([]);
  const waterfallColumns = ref<WaterfallItem[][]>([]);

  // 计算列宽
  const columnWidth = computed(() => {
    return (containerWidth.value - (columns - 1) * gutter) / columns;
  });

  // 初始化容器宽度
  const initContainerWidth = () => {
    const systemInfo = uni.getSystemInfoSync();
    containerWidth.value = systemInfo.windowWidth - 30;
  };

  // 重置列数据
  const resetColumns = () => {
    waterfallColumns.value = Array.from({ length: columns }, () => []);
    columnHeights.value = Array(columns).fill(0);
  };

  // 添加图片到最短列
  const addToShortestColumn = (item: WaterfallItem) => {
    const minHeight = Math.min(...columnHeights.value);
    const columnIndex = columnHeights.value.indexOf(minHeight);

    // 计算图片高度（保持宽高比）
    const ratio = item.height / item.width;
    const displayHeight = columnWidth.value * ratio;

    // 创建新对象避免修改原始数据
    const newItem = {
      ...item,
      displayHeight,
    };
    waterfallColumns.value[columnIndex]?.push(newItem);
    columnHeights.value[columnIndex] += displayHeight + gutter;
  };

  // 重新布局所有图片
  const relayoutImages = () => {
    resetColumns();
    const currentItems = items(); // 获取当前 items
    currentItems.forEach((item) => {
      addToShortestColumn(item);
    });
  };

  // 监听图片数据变化
  watch(
    () => [...items()], // 创建新数组确保响应性
    (newItems, oldItems) => {
      // 如果是刷新操作，重置布局
      if (
        newItems.length <= oldItems.length ||
        (newItems.length > 0 &&
          oldItems.length > 0 &&
          (newItems[0]?.id !== oldItems[0]?.id ||
            newItems[oldItems.length]?.id !== oldItems[oldItems.length]?.id))
      ) {
        relayoutImages();
      } else {
        const addedItems = newItems.slice(oldItems.length);
        addedItems.forEach((item) => {
          addToShortestColumn(item);
        });
      }
    },
    { deep: true },
  );

  // 监听列数变化
  watch(
    () => columns,
    () => {
      relayoutImages();
    },
  );

  // 初始化
  onMounted(() => {
    initContainerWidth();
    relayoutImages();

    // 监听窗口变化
    uni.onWindowResize?.(() => {
      initContainerWidth();
      relayoutImages();
    });
  });

  // 清理
  onUnmounted(() => {
    uni.offWindowResize?.(() => {});
  });

  // 工具函数-对比两数组
  // const compareArrays = <T extends { id: number }[]>(a: T, b: T): boolean => {
  //   // 取两个数组长度的最小值作为比较范围
  //   const minLength = Math.min(a.length, b.length);

  //   for (let i = 0; i < minLength; i++) {
  //     // 如果当前位置的 id 不相等，立即返回 false
  //     if (a[i].id !== b[i].id) {
  //       return false;
  //     }
  //   }

  //   // 所有比较位置都相等，返回 true
  //   return true;
  // };

  return {
    containerWidth,
    columnWidth,
    waterfallColumns,
    relayoutImages,
  };
}
